<template>
  <view class="wrap bd t1">
    <view style="width: 750rpx; position: fixed; z-index: 111">
      <u-tabs
        :list="list"
        :is-scroll="isScroll"
        :current="current"
        @change="tabsChange"
        active-color="#18C7E1"
        swiperWidth="750"
        bar-width="200"
        class="bd"
        bar-height="5"
      ></u-tabs>
    </view>
    <view v-if="current == 0" class="ltr mrt">
      <view v-for="(item, index) in wList" :key="item.id" class="dbox">
        <view class="item-content" style="width: 100%">
          <view
            class="flex flex-j-b flex-al-c uni-item-line"
            style="padding: 0 0 30upx"
          >
            <view class="flex flex-al-c">
              <view
                v-if="item.gestationalAge == 0"
                style="font-size: 36upx; font-weight: 900"
                >孕前BMI</view
              >
              <view v-else style="font-size: 36upx; font-weight: 900">{{
                item.reTimes
              }}</view>
              <view v-if="item.gestationalAge == 0">
                <u-tag
                  style="
                    right: 120upx;
                    top: 10rpx;
                    position: absolute;
                    border: none;
                  "
                  v-if="item.flag == '正常'"
                  :text="item.flag"
                  size="mini"
                  color="#fff"
                  bg-color="#3FB67A"
                ></u-tag>
                <u-tag
                  style="
                    right: 120upx;
                    top: 10rpx;
                    position: absolute;
                    border: none;
                  "
                  v-if="item.flag == '超重'"
                  :text="item.flag"
                  size="mini"
                  color="#fff"
                  bg-color="#FAB82B"
                ></u-tag>
                <u-tag
                  style="
                    right: 120upx;
                    top: 10rpx;
                    position: absolute;
                    border: none;
                  "
                  v-if="item.flag == '过轻'"
                  :text="item.flag"
                  size="mini"
                  color="#fff"
                  bg-color="#E27126"
                ></u-tag>
                <u-tag
                  style="
                    right: 120upx;
                    top: 10rpx;
                    position: absolute;
                    border: none;
                  "
                  v-if="item.flag == '肥胖'"
                  :text="item.flag"
                  size="mini"
                  color="#fff"
                  bg-color="#fa9a13"
                ></u-tag>
              </view>
              <u-tag
                style="
                  right: 120upx;
                  top: 10rpx;
                  position: absolute;
                  border: none;
                "
                v-if="item.flag == '正常'"
                :text="item.flag"
                size="mini"
                color="#fff"
                bg-color="#3FB67A"
              ></u-tag>
              <u-tag
                style="
                  right: 120upx;
                  top: 10rpx;
                  position: absolute;
                  border: none;
                "
                v-if="item.flag == '偏低'"
                :text="item.flag"
                size="mini"
                color="#fff"
                bg-color="#E27126"
              ></u-tag>
              <u-tag
                style="
                  right: 120upx;
                  top: 10rpx;
                  position: absolute;
                  border: none;
                "
                v-if="item.flag == '偏高'"
                :text="item.flag"
                size="mini"
                color="#fff"
                bg-color="#FAB82B "
              ></u-tag>
            </view>
            <view
              class="flex flex-al-c"
              style="width: 270upx"
              @click="showEdits(item, index)"
            >
              <!-- <u-icon name="arrow-right" color="#999" size="28" style="margin-right: 60upx;"></u-icon> -->
              <u-icon name="edit-pen" class="btns"></u-icon>
            </view>
          </view>
          <view
            class="flex flex-al-c flex-j-b"
            style="padding: 30upx 0 0; width: 90%"
          >
            <view v-if="item.gestationalAge != 0">
              孕周：孕{{ item.gestationalAge }}周</view
            >
            <view v-if="item.gestationalAge == 0">
              身高：{{ item.height }}cm</view
            >
            <view> 体重：{{ item.weight }}KG</view>
            <view v-show="item.gestationalAge == 0"> BMI：{{ item.bmi }}</view>
            <view v-show="item.gestationalAge != 0">
              变化值：{{ item.weightZz }}</view
            >
          </view>
        </view>
      </view>
      <u-popup v-model="showEdit" mode="center">
        <view class="iconbox">
          <view class="edits" @click="click(idx)"
            >修改
            <u-icon name="edit-pen"></u-icon>
          </view>
          <view class="del" @click="del(idx)"
            >删除
            <u-icon name="minus-circle"></u-icon>
          </view>
        </view>
      </u-popup>
    </view>
    <view class="bd" v-if="current != 0">
      <view class="btd bt1" @click="tz()">
        曲线使用世卫组织最新标准
        <text class="quit">什么是孕期体重管理曲线？？</text>
      </view>
      <view class="qiun">
        <view class="sli">
          <span><i class="le"></i>体重增长(kg)</span>
        </view>
      </view>
      <view class="viewimg">
        <view>
          <echarts :option="option" style="height: 500px"></echarts>
        </view>
      </view>
    </view>
    <view class="edit" @tap="goAddGraph" v-if="current == 0">
      <u-icon name="edit-pen-fill" color="#fff" size="45"></u-icon>
    </view>
    <u-modal
      v-model="showConfirm"
      @confirm="confirm"
      @cancel="refres"
      ref="uModal"
      content="您暂未录入首次体重记录,请先录入首次体重记录？"
      :async-close="true"
      :show-cancel-button="true"
    ></u-modal>
  </view>
</template>

<script>
import echarts from "@/components/echarts/echarts.vue";
export default {
  components: {
    echarts,
  },
  data() {
    return {
      showEdit: false,
      idx: "",
      showConfirm: false,
      firstadd: "", //是否首次进入
      jcfirst: false,
      list: [
        {
          name: "记录列表",
        },
        {
          name: "曲线记录",
        },
      ],
      current: 0, // tabs组件的current值，表示当前活动的tab选项
      windowHeight: 800,
      wList: [],
      isScroll: false,
      charts: {
        cWidth: "",
        cHeight: "",
        pixelRatio: 1,
      },
      firstRecord: {},
      xdata: [],
      weightZzdata: [],
      sxdata: [],
      xxdata: [],
    };
  },
  onLoad() {
    this.getRecord();
  },
  onShow() {
    this.showEdit = false;
    this.getRecord();
  },
  onReady() {
    // this.getUiStyle();
  },
  methods: {
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    logstatrt() {
      //console.log('初次调用');
      this.option = {
        tooltip: {
          trigger: "axis",
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            start: 0,
            end: 15,
            type: "inside", //slider表示有滑动块的，inside表示内置的
          },
        ],
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          name: "孕周",
          nameLocation: "end",
          data: this.xdata,
          boundaryGap: false,
          axisLabel: {
            //坐标轴刻度标签的相关设置
            interval: 0, //横轴信息全部显
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#efefef",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#939393",
              width: 1, //这里是为了突出显示加上的
            },
          },
          axisLabel: {
            fontSize: 10,
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#efefef",
            },
            interval: 1,
            min: 0,
            max: 21,
          },
          axisLine: {
            lineStyle: {
              color: "#939393",
              width: 1, //这里是为了突出显示加上的
            },
          },
          axisLabel: {
            fontSize: 10,
          },
        },
        series: [
          {
            name: "上限",
            type: "line",
            data: this.sxdata,
            symbol: "none",
            lineStyle: {
              type: "dashed",
              width: 1,
            },
            itemStyle: {
              color: "#cbcbcb",
            },
            label: {
              show: true,
              formatter: "上限",
            },
          },
          {
            name: "下限",
            type: "line",
            data: this.xxdata,
            symbol: "none",
            lineStyle: {
              type: "dashed",
              width: 1,
            },
            itemStyle: {
              color: "#cbcbcb",
            },
            label: {
              show: true,
              formatter: "下限",
            },
          },
          {
            name: "体重增长",
            type: "line",
            data: this.weightZzdata,
            symbol: "circle",
            symbolSize: 4,
            connectNulls: true,
            itemStyle: {
              color: "#18C7E1",
            },
          },
        ],
      };
    },
    showEdits(index) {
      //修改
      //console.log(index)
      this.idx = index;
      this.showEdit = true;
    },
    del(v) {
      //删除
      //console.log(v)
      this.config
        .post("/gravid/planGravidPrenatalCheck/delGravidRecord", {
          id: v.id,
        })
        .then((res) => {
          //console.log(res)
          if (res.data.code === 200) {
            this.showEdit = false;
            this.getRecord();
          } else {
            uni.showToast({
              title: res.data.msg,
              icon: "none",
            });
          }
        });
    },
    firstNotice() {
      this.showConfirm = true;
    },
    confirm() {
      let first = this.firstadd;
      uni.navigateTo({
        url: "/pages/main/pregnant/weight-add?first=" + first,
      });
      this.showConfirm = false;
    },
    refres() {
      uni.redirectTo({
        url: "/pages/main/pregnant/weight-manage",
      });
    },
    getSysInfo() {
      let self = this;
      uni.getSystemInfo({
        success(res) {
          self.windowHeight = res.windowHeight;
        },
      });
    },
    // tabs通知swiper切换
    tabsChange(index) {
      //console.log(index)
      this.current = index;
      this.isScroll = false;
      this.getRecord();
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx;
      this.$refs.uTabs.setDx(dx);
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      let current = e.detail.current;
      this.$refs.uTabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    // scroll-view到底部加载更多
    onreachBottom() {},
    click(item) {
      //修改
      //console.log(item)
      if (item.gestationalAge == 0) {
        uni.navigateTo({
          url:
            "/pages/main/pregnant/weight-add?id=" +
            item.id +
            "&height=" +
            item.height +
            "&weight=" +
            item.weight +
            "&gestationalAge=" +
            item.gestationalAge +
            "&first=" +
            0,
        });
        this.showConfirm = false;
      } else {
        uni.navigateTo({
          url:
            "/pages/main/pregnant/weight-add?id=" +
            item.id +
            "&height=" +
            0 +
            "&weight=" +
            item.weight +
            "&gestationalAge=" +
            item.gestationalAge,
        });
      }
    },
    open(index) {
      // 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
      // 原本为'false'，再次设置为'false'会无效
      this.wList[index].isflag = true;
      this.wList.map((val, idx) => {
        if (index != idx) {
          val.isflag = false;
        }
      });
    },
    getRecord() {
      let self = this;
      let LineA = {
        categories: [],
        series: [],
      };
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .get("/gravid/planGravidPrenatalCheck/getGravidQx", {})
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            if (typeof res.data.data === "undefined") {
              this.jcfirst = false;
              /* uni.showToast({
								title: '您暂未录入数据',
								icon: 'none'
							}); */
              this.firstNotice();
              this.firstadd = 0;
            } else {
              this.jcfirst = true;
              res.data.data.map((item) => {
                item.isflag = false;
              });
              self.wList = res.data.data;
              /* self.firstRecord = res.data.data[0]
							self.wList = res.data.data.slice(1) || []; */
            }
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .post("/gravid/planGravidPrenatalCheck/gravidQx", {})
        .then((res) => {
          uni.hideLoading();
          //console.log(res)
          if (res.data.code === 200) {
            self.xdata = [];
            self.weightZzdata = [];
            self.sxdata = [];
            self.xxdata = [];
            if (typeof res.data.data === "undefined") {
              /* uni.showToast({
								title: '您暂未录入数据',
								icon: 'none'
							}); */
            } else {
              res.data.data.forEach((it) => {
                self.xdata.push(it.yz + "孕周");
                self.weightZzdata.push(it.weightZz == 0 ? null : it.weightZz);
                self.sxdata.push(it.sx);
                self.xxdata.push(it.xx);
              });
              self.logstatrt();
            }
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    tz() {
      uni.navigateTo({
        url: "/pages/main/pub/babymoninfo",
      });
    },
    goAddGraph() {
      uni.navigateTo({
        url: "/pages/main/pregnant/weight-add",
      });
    },
  },
};
</script>
<style scoped>
.viewimg {
  height: 100%;
  /* background: #d1e9e9; */
}
</style>
<style lang="less" scoped>
.btd {
  position: absolute;
  width: 100%;
  height: 100rpx;
  top: 1150rpx;
  font-size: 22rpx;
  line-height: 100rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  span {
    display: inline-block;
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    margin: 10rpx;
  }

  .first {
    background-color: #18c7e1;
  }

  .second {
    background-color: #ff557f;
  }
}

.bt1 {
  top: 1190rpx;
  z-index: 11;

  .quit {
    margin-left: 20rpx;
    color: #007aff;
  }
}

.wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top));
  width: 100%;
  margin-bottom: 30rpx;
  // position: fixed;
  background-color: #fff;
}

.swiper-box {
  flex: 1;
}

.swiper-item {
  height: 100%;
}

.ltr {
  overflow-y: scroll;
}

.box {
  width: 100%;
  height: 100%;
  background-color: #eee;
  padding-top: 1upx;
}

.edit {
  width: 120upx;
  height: 120upx;
  border-radius: 50%;
  background-color: #84e1ef;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 10%;
  bottom: 20%;
  position: fixed;
}

.qiun-charts {
  margin-top: 60rpx;
  height: 1000rpx;
  position: relative;
}

.tips {
  position: absolute;
  right: 8rpx;
  color: #c9c9c9;
  font-size: 13px;
  bottom: 16rpx;
}

.charts {
  height: 1000rpx;
}

.qiun {
  // padding-top: 40rpx;
  background-color: #ffffff;
  // overflow: scroll;

  .sli {
    padding: 80rpx;
    position: fixed;

    .le {
      width: 20rpx;
      height: 20rpx;
      display: inline-block;
      border-radius: 50%;
      background-color: #18c7e1;
      margin: 0 20rpx 0 5rpx;
    }
  }
}

.dbox {
  -webkit-animation-name: fadeIn;
  /*动画名称*/
  -webkit-animation-duration: 0.3s;
  /*动画持续时间*/
  -webkit-animation-iteration-count: 1;
  /*动画次数*/
  -webkit-animation-delay: 0s;
  /*延迟时间*/
  margin: 30rpx 10px 10px;
  padding: 30rpx;
  border-radius: 15upx;
  box-shadow: 0 0 10upx 0 #ccc;
  overflow: hidden;
}

.edits {
  padding: 20rpx;
  color: #ffffff;
  line-height: 20rpx;
  border-radius: 10rpx;
  background-color: #18c7e1;
  width: 270rpx;
  text-align: center;
}

.del {
  margin-top: 20rpx;
  padding: 20rpx;
  color: #ffffff;
  background-color: #fd6666;
  line-height: 20rpx;
  border-radius: 10rpx;
  width: 270rpx;
  text-align: center;
}

.iconbox {
  margin: 66rpx 36rpx;
}
.mrt {
  margin-top: 80rpx;
}
.btns {
  position: absolute;
  right: 18rpx;
  bottom: 6rpx;
  font-size: 32px;
  color: #84e1ef;
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  .bd {
    background-color: #1b1c1e !important;
    position: relative !important;
  }
  .mrt {
    margin-top: 80rpx;
  }
  .bd1 {
    background-color: #38383c !important;
  }
  .t1 {
    color: #ccc !important;
  }
  .btd {
    position: absolute;
    width: 100%;
    height: 100rpx;
    top: 1150rpx;
    font-size: 22rpx;
    line-height: 100rpx;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #1b1c1e;
  }
}
</style>